<template>
    <div>
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <div class="container clear">
                <div class="breadcrumb-main clear">
                    <div class="breadcrumb-hd">您的位置：</div>
                    <ul class="breadcrumb-bd clear">
                        <li class="breadcrumb-item">
                            <a href="首页.html">首页</a>
                        </li>
                        <li class="breadcrumb-item cur">个人中心</li>
                    </ul>
                </div>
            </div>
        </div>
    
        <div class="person-center">
            <div class="container">
                <div class="person-center-main clear">
                    <!-- left -->
                    <div class="person-center-nav">
                        <div class="person-nav-img">
                            <img src="../assets/images/person.png" alt="">
                        </div>
                        <div class="person-nav-con clear">
                            <div class="person-nav-item" v-for="item in nav">
                                <router-link :to="item.href">{{item.name}}</router-link>
                            </div>
                        </div>
                    </div>
                    <!-- right -->
                    <keep-alive>
                        <router-view :key="key"></router-view>
                    </keep-alive>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            nav: [{
                name: '个人资料',
                href: '/PersonalCenter/UserInfo'
            }, {
                name: '账户管理',
                href: '/PersonalCenter/AccountManage'
            }, {
                name: '兑换中心',
                href: '/PersonalCenter/ExchangeCenter'
            }, {
                name: '我的云粉',
                href: '/PersonalCenter/MyFans'
            }, {
                name: '奖励收益',
                href: '/PersonalCenter/RecommendEarnings'
            }, {
                name: 'C资产收益',
                href: '/PersonalCenter/CEarnings'
            }, {
                name: '支付中心',
                href: '/PersonalCenter/PayCenter'
            }, {
                name: '安全设置',
                href: '/PersonalCenter/SafeSet'
            }]
        }
    },
    computed: {
        key() {
            return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
        }
    }
}
</script>

<style>
.pay-panel-con {
    padding: 0 60px;
}

.pay-panel-con .pay-panel-con-item {
    font-size: 18px;
    color: #fff;
    margin-bottom: 8px;
}

.person-center-nav {
    float: left;
    width: 205px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 5px;
}

.person-detail-content {
    float: left;
    margin-left: 20px;
    width: 971px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 5px;
}

.person-nav-img {
    width: 166px;
    height: 166px;
    margin: auto;
    padding: 20px 0;
}

.person-nav-img img {
    width: 166px;
    height: 166px;
}

.person-nav-con .person-nav-item {
    text-align: center;
    color: #646464;
    border-top: 1px solid #e6e6e6;
    cursor: pointer;
}

.person-nav-con .person-nav-item a {
    padding: 15px;
    display: block;
    font-size: 15px;
    color: #4C4C4C;
}

.person-nav-con .person-nav-item.cur {
    border-top: 1px solid #2f95e5;
    background: #2f95e5;
}

.person-nav-con .person-nav-item.cur a {
    color: #fff;
}

.pay-main {
    border-radius: 5px;
    padding: 25px;
    background: url(../assets/images/about-bg.png) no-repeat right 135px;
    background-size: 400px;
}

.pay-item .pay-hd {
    font-size: 21px;
    color: #323232;
    font-weight: bold;
    margin-bottom: 15px;
}

.pay-item .pay-bd {
    padding-bottom: 25px;
    font-size: 15px;
    color: #464646;
    line-height: 150%;
}

.pay-panel {
    margin-bottom: 15px;
}

.pay-panel-item {
    float: left;
    width: 500px;
    height: 333px;
    background: url(../assets/images/panel.png) no-repeat center;
    margin-left: -10px;
    background-size: 100%;
}

.pay-panel-item-hd {
    padding: 50px 50px 55px;
    color: #a58860;
    font-size: 22px;
}

.pay-panel-item-hd .pay-bank {
    float: right;
    padding-left: 33px;
    position: relative;
}

.pay-panel-item-hd .pay-bank .icon {
    position: absolute;
    top: 3px;
    left: -5px;
    background: url(../assets/images/icon/bank.png) no-repeat center;
    width: 35px;
    height: 27px;
}

.pay-panel-card {
    font-size: 32px;
    color: #fbfbf9;
    font-family: 'Arial';
    margin-bottom: 35px;
    padding: 0 60px;
    text-shadow: 2px 2px 5px #909090;
}

.pay-panel-con {
    padding: 0 60px;
}

.pay-panel-con .pay-panel-con-item {
    font-size: 18px;
    color: #fff;
    margin-bottom: 8px;
}

.person-center-nav {
    float: left;
    width: 205px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 5px;
}

.person-detail-content {
    float: left;
    margin-left: 20px;
    width: 971px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 5px;
}

.person-nav-img {
    width: 166px;
    height: 166px;
    margin: auto;
    padding: 20px 0;
}

.person-nav-img img {
    width: 166px;
    height: 166px;
}

.person-nav-con .person-nav-item {
    text-align: center;
    color: #646464;
    border-top: 1px solid #e6e6e6;
    cursor: pointer;
}

.person-nav-con .person-nav-item a {
    padding: 15px;
    display: block;
    font-size: 15px;
    color: #4C4C4C;
}

.person-nav-con .person-nav-item.cur {
    border-top: 1px solid #2f95e5;
    background: #2f95e5;
}

.person-nav-con .person-nav-item.cur a {
    color: #fff;
}

.person-detail-content .person-detail-hd {
    padding: 15px 20px;
    font-size: 16px;
    border-bottom: 1px solid #e6e6e6;
}

.person-detail-bd {
    padding: 30px 65px;
}

.person-detail-bd .input-btn {
    width: 100px;
}

.person-detail-bd button.input-btn {
    width: 120px;
}

.person-detail-bd .form-section {
    padding-bottom: 15px;
}

.person-center {
    margin-bottom: 19px;
}

.person-account-num .account-item {
    float: left;
    width: 33%;
    text-align: center;
    min-height: 62px;
    border-right: 1px solid #e6e6e6;
}

.account-hd {
    font-size: 16px;
    color: #a4a4a4;
    font-weight: bold;
    margin-bottom: 15px;
}

.account-bd {
    color: #86caff;
    font-size: 16px;
    color: #86caff;
}

.person-account .person-center-bd {
    padding: 30px 0;
}

.person-account .person-account-ft {
    padding: 15px;
}

.person-account .person-account-ft .input-btn {
    float: left;
    margin-right: 20px;
}

.account-btn {
    background: #7cd020;
    border: 1px solid #7cd020;
}

.account-btn2 {
    background: #edf9ff;
    color: #2d90de;
    border: 1px solid #2d90de;
}

.account-btn2:hover {
    color: #2d90de;
}

.account-btn3 {
    background: #fff;
    color: #969696;
    border: 1px solid #969696;
}

.account-btn3:hover {
    color: #969696;
}

.tab .tab-hd .tab-hd-item {
    padding: 20px 20px 10px 20px;
    padding-bottom: 10px;
    display: inline-block;
    color: #646464;
    cursor: pointer;
    font-size: 15px;
}

.tab .tab-hd .tab-hd-item.cur {
    color: #2f95e5;
}

.tab-hd {
    border-bottom: 1px solid #e6e6e6;
}

.table table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.el-table__footer-wrapper thead div, .el-table__header-wrapper thead div{
    color: #859ab7;
}
.table th {
    color: #859ab7;
    font-size: 15px;
    border-bottom: 1px solid #e6e6e6;
    font-weight: normal;
    border-right:0;
    background: transparent;
}

.table td {
    font-size: 14px;
    color: #969696;
    border-bottom: 1px solid #e6e6e6;
    border-right:0;
}
.table .el-table{
    border: 0;
}

.table .el-table th>.cell{
    text-align: center;
    background: transparent;  
}
.tab .page-main {
    padding: 15px;
}
.tab .page-main .el-pagination{float: right;}
.tab .el-tabs__item {
    height: 50px;
    line-height: 55px;
    cursor: pointer;
    font-size: 15px;
}

.tab .el-tabs__active-bar {
    background-color: transparent;
}

.tab .el-tabs__header{
    margin-bottom:0;
    border-bottom:1px solid #ececec;
}
.person-center-content {
    float: left;
    margin-left: 20px;
    width: 971px;
    min-height: 564px;
}

.person-center-content .person-center-item {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 5px;
    margin-bottom: 20px;
}

.person-center-hd {
    padding: 15px 20px;
    font-size: 16px;
    border-bottom: 1px solid #e6e6e6;
}

.person-edit-phone {
    padding: 76px 65px 123px;
    width: 356px;
    margin: auto;
    margin-bottom: 46px;
}

.person-Info .person-center-bd {
    position: relative;
}

.person-Info .person-Info-con {
    position: absolute;
    width: 230px;
    top: 32px;
    left: 40px;
}

.person-Info .person-account-num {
    margin-left: 240px;
}

.person-Info .person-Info-hd {
    color: #859ab7;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 7px;
}

.person-Info .person-Info-hd .person-phone {
    font-family: 'Arial';
    font-weight: normal;
    font-size: 17px;
    margin-left: 3px;
}

.person-Info .person-Info-bd {
    font-size: 15px;
    color: #969696;
}

.person-Info .person-Info-bd .person-Id {
    font-family: 'Arial';
    margin-left: 3px;
}

.person-search {
    padding: 20px 20px 15px;
}

.person-search .btn-group {
    padding-top: 0;
    float: left;
}

.person-search .btn-group .input-btn {
    padding: 9px 10px;
    min-width: 80px;
}

.person-code-search .form-section2 .input-text {
    width: 143px;
}

.person-result {
    margin: 20px;
    padding: 20px 20px 15px;
    background: #fffded;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.person-result .person-result-item {
    margin-bottom: 5px;
}

.person-result-item .title {
    margin-right: 10px;
}

.person-result-item .num {
    font-family: 'Arial';
}

.person-result-item .time {
    margin-right: 20px;
}

.person-code .quantity {
    float: left;
}

.person-code .code-init {
    display: inline-block;
    padding-top: 21px;
    margin-left: 15px;
}


.form-code .code-total {
    position: relative;
    width: 465px;
}

.code-control {
    position: absolute;
    top: 0;
    right: 0;
    width: 290px;
}

.form-code .code-total .num {
    font-size: 15px;
    height: 24px;
    line-height: 24px;
    padding: 0px 12px;
    margin: 8px 0;
    border-left: 1px solid #e2e2e2;
    float: right;
}


.ph-code {
	margin-bottom: 10px;
}
.ph-code .ph-code-main {
	float: right;
}
.ph-code-item {
	float: left;
	/* color: #2f95e5; */
	margin-right: 20px;
	font-family: 'Arial';
	font-size: 15px;
	line-height: 20px;
}
.ph-code-item.high {
	color: #ff0000;
	background: url(../assets/images/icon/high.png) no-repeat 2px 3px;
	padding-left: 18px;
}
.ph-code-item.low {
	background: url(../assets/images/icon/low.png) no-repeat 2px 3px;
	padding-left: 18px;
	color: #7cd020;
}
</style>
